Reactstrap — Customize Popovers

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add popovers with Reactstrap.

Popovers Placements

Popover placements can be placed in various positions.

We just have to change the placement prop to change the placement.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Popover, PopoverHeader, PopoverBody } from "reactstrap";

export default function App() {
  const [popoverOpen, setPopoverOpen] = React.useState(false);

  const toggle = () => setPopoverOpen(!popoverOpen);

  return (
    <div>
      <Button id="Popover" type="button">
        Launch Popover
      </Button>
      <Popover
        placement="bottom"
        isOpen={popoverOpen}
        target="Popover"
        toggle={toggle}
      >
        <PopoverHeader>Popover Title</PopoverHeader>
        <PopoverBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus
          fermentum lacus
        </PopoverBody>
      </Popover>
    </div>
  );
}

to set the placement to bottom with the placement prop.

Other possible values include top , left , and right .

UncontrolledPopovers

We don’t need to control the state of the popover to open or close it.

This can be done with the UncontroledPopover component.

This is useful if we don’t need to control the popover programmatically.

For instance, we can use it by writing:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Button,
  UncontrolledPopover,
  PopoverHeader,
  PopoverBody
} from "reactstrap";

export default function App() {
  return (
    <div>
      <Button id="UncontrolledPopover" type="button">
        Launch Popover
      </Button>
      <UncontrolledPopover placement="bottom" target="UncontrolledPopover">
        <PopoverHeader>Popover Title</PopoverHeader>
        <PopoverBody>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus
          fermentum lacus
        </PopoverBody>
      </UncontrolledPopover>
    </div>
  );
}

We have the Button and the UncontrolledPopover component to let us toggle the popover.

The id of the trigger component and the target of the UncontrolledPopover has to match.

Repositioning Popovers

We can reposition popover content on update.

For instance, we can write;

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Button,
  UncontrolledPopover,
  PopoverHeader,
  PopoverBody,
  Collapse
} from "reactstrap";

const PopoverContent = ({ scheduleUpdate }) => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <PopoverHeader>Update</PopoverHeader>
      <PopoverBody>
        <Button onClick={() => setIsOpen(!isOpen)}>Click me</Button>
        <Collapse
          isOpen={isOpen}
          onEntered={scheduleUpdate}
          onExited={scheduleUpdate}
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus
          fermentum lacus
        </Collapse>
      </PopoverBody>
    </>
  );
};

export default function App() {
  return (
    <div className="text-center">
      <Button id="ScheduleUpdateButton" type="button">
        Open Popover
      </Button>
      <UncontrolledPopover
        trigger="click"
        placement="top"
        target="ScheduleUpdateButton"
      >
        {({ scheduleUpdate }) => (
          <PopoverContent scheduleUpdate={scheduleUpdate} />
        )}
      </UncontrolledPopover>
    </div>
  );
}

We create the PopoverContent component that takes a scheduleUpdate prop to lets us change the position when we click on a button.

The PopoverContent component to call scheduleUpdate when the Collapse content is shown or hidden.

The onEntered callback is run when the content is shown and onExited callback is run when the content is hidden.

Conclusion

Popover placements can be changed statically or dynamically.

Also, we can add an UncontrolledPopover to let us display a popover without controlling its state.